checkToken() //验证token,有效时间只有两小时
renderUname() //回显
logOut() //退出登录
//统计数据封装函数
const getData = async () => {
/* const data = localStorage.getItem('userMseeage') ? JSON.parse(localStorage.getItem('userMseeage')) : {} */
//console.log(data);
try{const res = await axios({
    url:'/dashboard',
    method:'get',
    /* headers:{
        Authorization:data.token
    } */
})
console.log(res);
//调用渲染函数
//重要：在获取数据函数中调用渲染函数，参数为获取到的数据  
renderOverview(res.data.data.overview)
//函数调用渲染折线图 薪资走势
renderYear(res.data.data.year)
//薪资分布
renderSalaryData(res.data.data.salaryData)
//小组分布
renderGroupData(res.data.data.groupData)
//男女薪资分布
renderGenderdata(res.data.data.salaryData)
//籍贯分布
renderProvinceData(res.data.data.provinceData)
} catch (err){
    console.log(err); 
    if(err.responses.status === 401){
        //token过期或被篡改
        alertShow('身份过期请重新登陆')
        //清楚存储数据
        localStorage.removeItem('userMseeage')
        //跳转登录页
        location.href = './login.html'
    }
}
}
getData()
//渲染函数封装集合
const renderOverview = (overview) =>{
    //数据的键和选择的类名一致，因此可以遍历出来
    Object.keys(overview).forEach(e => {
        //注意获取对象对应键的值写法  object[]
        document.querySelector(`.${e}`).innerHTML = overview[e]
    })
}
//折线图目标渲染 薪资走势
const renderYear = (year) => {
console.log(year);
//初始化实例对象
const myChart = echarts.init(document.querySelector('#line'));
//准备配置项
option = {
    title:{
    text:'2022全学科薪资走势',
    top:'15' ,
    left:'15'   
    },
    grid:{
        top:80,
        //left:'15%',
        width:'90%',
        height:'70%'
    },
//提示框
        tooltip: {
            trigger:'axis'
        },
  xAxis: {
    type: 'category',
    data: year.map(e => {return e.month}),
    lineStyle:{
        color:'#cccccc',
        type:'dashed'
    }
  },
  yAxis: {
    type: 'value',//数字类型
    splitLine:{
                //show:false   轴线显示隐藏
                lineStyle:{
                    type:'dashed'//虚线
                }
            }
  },
  series: [
    {
      data: year.map(e => {return e.salary}),
      type: 'line',
      SymbolSize:20,
      lineStyle:{
        width:5,
        color:{
        type: 'linear',
  x: 0, //起始位置
  y: 0,
  x2: 1, //结束位置
  y2: 1,
  colorStops: [{
      offset: 0, color: 'rgba(50, 197, 255, 1)' // 0% 处的颜色
  }, {
      offset: 1, color: 'rgba(206, 237, 255, 1)' // 100% 处的颜色
  }],
  global: false // 缺省为 false
      }},
      smooth: true,
      areaStyle: {
        color:{
        type: 'linear',
  x: 0, //起始位置
  y: 0,
  x2: 0, //结束位置
  y2: 1,
  colorStops: [{
      offset: 0, color: '#b2d7f7' // 0% 处的颜色
  }, {
      offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
  }],
  global: false // 缺省为 false
      }
      }
    }
  ]
};
//调用配置项
myChart.setOption(option);
}
//饼状图薪资分布
const renderSalaryData = (salaryData) =>{
    console.log(salaryData);
    //初始化实例对象
const myChart = echarts.init(document.querySelector('#salary'));
//准备配置项
option = {
    title:{
        text:'班级薪资分布',
        top:10,
        left:15
    },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: '10%',
    left: 'center'
  },
  series: [
    {
      name: '班级薪资分布',
      type: 'pie',
      radius: ['40%', '70%'],//内外圆的半径
      avoidLabelOverlap: false, //提示线的堆叠策略
      itemStyle: {
        borderRadius: 15,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {//提示文字
        show: false,
        position: 'center'
      },
      emphasis: { //高亮扇形区域样式
        label: {
          show: false,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: salaryData.map(e =>{
       return {
            value: e.b_count + e.g_count,
            name: e.label
        }
      })
    }
  ]
};
//调用配置项
myChart.setOption(option);
}
//每组薪资
const renderGroupData = (groupData) => {
//初始化实例对象
const myChart = echarts.init(document.querySelector('#lines'));
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data:groupData[1].map(e => {return e.name}) ,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '40%',
      itemStyle:{
        color:{
              type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0, color: '#34D39A' // 0% 处的颜色
  }, {
      offset: 1, color: '#adf8ddff' // 100% 处的颜色
  }],
  global: false // 缺省为 false
        }
      },
      data: groupData[1].map(e => {return e.hope_salary}) 
    },{
      name: 'Direct',
      type: 'bar',
      barWidth: '40%',
      itemStyle:{
        color:{
              type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0, color: '#499FEE' // 0% 处的颜色
  }, {
      offset: 1, color: '#b0d8feff' // 100% 处的颜色
  }],
  global: false // 缺省为 false
        }
      },
      data: groupData[1].map(e => {return e.salary}) 
    }
  ]
};
//调用配置项
myChart.setOption(option);
//组号绑定点击事件，事件委托
document.querySelector('#btns').addEventListener('click' , e =>{
    //判断点击对象是否为button
    if(e.target.tagName === 'BUTTON'){
    //排他思想
    document.querySelector('#btns').querySelector('.btn-blue').classList.remove('btn-blue')
    e.target.classList.add('btn-blue')
    }
    //获取点击对象的组号
    //console.log(e.target.innerHTML);
    const group = e.target.innerHTML
    //对应点击单位改变option的内容
    option.xAxis[0].data= groupData[group].map(e => {return e.name})
    option.series[0].data = groupData[group].map(e => {return e.hope_salary})
    option.series[1].data = groupData[group].map(e => {return e.salary})
    //重新渲染数据
    myChart.setOption(option);
})
}
//男女薪资分布
const renderGenderdata = (genderdata) => {
//初始化实例对象
const myChart = echarts.init(document.querySelector('#gender'));
option = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  title:[
    {
        text:'男女薪资分布',
        top:10,
        left:15,
        textStyle:{
            fontSize:16
        }
    },
    {
        text:'男生',
        top:'50%',
        left:'45%',
        textStyle:{
            fontSize:14
        }
    },
    {
        text:'女生',
        top:'90%',
        left:'45%',
        textStyle:{
            fontSize:14
        }}
  ],
  series: [
    {
      name: '男生',
      type: 'pie',
      radius: ['20%', '30%'],
      center: ['50%', '30%'],
      //roseType: 'area',  根据数据显示宽度大小
      itemStyle: {
        borderRadius: 4
      },
      data: genderdata.map(e =>{
        return {
            value : e.b_count,
            name : e.label
        }
      })
      
      /* [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ] */
    },
    {
      name: '女生',
      type: 'pie',
      radius: ['20%', '30%'],
      center: ['50%', '70%'],
      //roseType: 'area',
      itemStyle: {
        borderRadius: 4
      },
      data: genderdata.map(e =>{
        return {
            value : e.g_count,
            name : e.label
        }
      })
      /* [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ] */
    }
  ]
};
//调用配置项
myChart.setOption(option);
}
//籍贯分布 echarts社区找
const renderProvinceData = (provinceData) => {
    console.log(provinceData);
  const dom = document.querySelector('#map')
  const myEchart = echarts.init(dom)
  //需要把服务器有的数据赋值给dataList
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]
  //循环遍历dataList，用每一项和provinceData对比
  //includes方法用来查看是否包含
  const max = []
  dataList.forEach(e => {
    const res =   provinceData.find(ele =>{
        return ele.name.includes(e.name)
    })
    console.log(res);//res为服务端返回的数据包括了dataList的，不包括则为undefined
    //如果有数据则让dataList的每一项的value和服务端的value一致
    if(res !== undefined){
        e.value = res.value
        max.push(res.value)//将后台有数据的value值推入max数组
        //console.log(max);
    }
  })
  //左下角显示最大值
    let max1 = max[0]
  for(let i = 0; i < max.length; i++){
    if(max1 < max[i]){
        max1 = max[i]
    }
  }
  const option = {
    //标题组件
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    //提示框组件
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    //左下角图例
    visualMap: {
      min: 0,
      max: max1,
      left: 'left',
      bottom: '20',
      text: [max1, '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myEchart.setOption(option)
}
